<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/11 0011
  Time: 20:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fnt" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<title>问题类型管理</title>
<link rel="stylesheet" href="/manage/css/static/question-type/demo.css">
<link rel="stylesheet" href="/manage/css/static/question-type/zTreeStyle.css">
<script src="/manage/js/lib/question-type/jquery-3.4.1.min.js"></script>
<script src="/manage/js/lib/question-type/jquery.ztree.core.min.js"></script>
<script src="/manage/js/lib/question-type/jquery.ztree.excheck.min.js"></script>
<script src="/manage/js/lib/question-type/jquery.ztree.exedit.min.js"></script>
</head>
<body>
<div>
	<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>
<script>
		var zTreeObj;
		//zTree的配置
		var setting = {
			view: {
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
				selectedMulti: false
			},
			check:{
				enable:true
			},
			edit: {
				enable: true,
				editNameSelectAll: true,
				showRemoveBtn: showRemoveBtn,
				showRenameBtn: showRenameBtn
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				onClick:zTreeOnClick, //点击选中事件　　
				beforeDrag: beforeDrag,    // 可设置是否允许拖拽功能
				beforeEditName: beforeEditName,
				beforeRemove: beforeRemove,
				beforeRename: beforeRename,
				onRemove: onRemove,
				onRename: onRename
			}
		};
		//zTree初始化加载的节点树

		var zNodes =[
			<c:forEach items="${requestScope.questionTypeList}" var="questionType" varStatus="stat">
			{id:${questionType.id},pId:${questionType.pId},name:"${questionType.name}", open:true},
			</c:forEach>
		];

		var log, className = "dark";
		function zTreeOnClick(event, treeId, treeNode) {
			console.log('zTreeOnClick');
			console.log(treeNode)
			var treeObj = $.fn.zTree.getZTreeObj("treeDemo"),
					nodes = treeObj.getCheckedNodes(true),
					v = "";
			for (var i = 0; i < nodes.length; i++) {
				v += nodes[i].name + ",";
				console.log("节点id:" + nodes[i].id + "节点名称" + v); //获取选中节点的值
			}
		}
		function beforeDrag(treeId, treeNode) {
			return false; //false=禁用拖拽功能， true=开启
		}
		function beforeEditName(treeId, treeNode) {
			console.log('beforeEditName');
			console.log(treeNode)
			className = (className === "dark" ? "":"dark");
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			zTree.editName(treeNode);
		}
		function beforeRemove(treeId, treeNode) {
			console.log('beforeRemove');
			className = (className === "dark" ? "":"dark");
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
		}
		function onRemove(e, treeId, treeNode) { //确定删除节点
			var id=treeNode.id;
			$.ajax({
				url: "/manage/knowledge-structure/deleteNode",
				data: {id:id},
				type:"post",
				success:function (mes) { }
			});
		}
		function beforeRename(treeId, treeNode, newName, isCancel) {
			console.log('beforeRename');
			className = (className === "dark" ? "":"dark");
			if (newName.length == 0) {
				setTimeout(function() {
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					zTree.cancelEditName();
					alert("节点名称不能为空。");
				}, 0);
				return false;
			}
			return true;
		}
		function onRename(e, treeId, treeNode, isCancel) {
			var name=treeNode.name;
			var id=treeNode.id;
			$.ajax({
				url: "/manage/knowledge-structure/renameNode",
				data: {id:id,name:name},
				type:"post",
				success:function (mes) {
					alert("修改成功!");
				}
			});
		}
		function showRemoveBtn(treeId, treeNode) {
			return true;
		}
		function showRenameBtn(treeId, treeNode) {
			return true;
		}

		var newCount = 1;
		function addHoverDom(treeId, treeNode) {
			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
			var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
					+ "' title='添加子节点' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			$('.edit').attr('title', '编辑');
			$('.remove').attr('title', '删除');
			var btn = $("#addBtn_"+treeNode.tId);
			if (btn) btn.bind("click", function(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				var obj = {pId:treeNode.id, name:"新增子节点 " + (newCount++)};
				$.ajax({
					url:"/manage/knowledge-structure/addNode",
					data: obj,
					dataType:"json",
					type:"post",
					success:function (jsonArray) {
						if(jsonArray!=null){
							alert("添加成功!");
						}
					}
				});
				zTree.addNodes(treeNode, obj);
				return false;
			});
		};
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_"+treeNode.tId).unbind().remove();
		};

		//初始化加载树bai
		$(function () {
			zTreeObj=$.fn.zTree.init($("#treeDemo"), setting, zNodes);  //加载树节点信息
			zTreeObj.reAsyncChildNodes(null, "refresh");
		});
</script>